<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户管理</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="userConForm">
</form>

<!--按钮框-->
<div class="layui-row">
    <div class="layui-col-xs12" id="userBtnForm" style="margin-left: 40px;margin-bottom: 15px;">
    </div>
</div>

<!--列表-->
<table class="layui-hide" id="userTable"></table>

<!-- 你的 HTML 代码 -->
<script>
    layui.use(['http','shopx','form','pub','table','http','laydate','formSelects'], function () {
        var  http = layui.http
            , shopx = layui.shopx
            , form = layui.form
            , form = layui.form
            ,laydate = layui.laydate
            ,http = layui.http
            ,formSelects = layui.formSelects
            , pub = layui.pub
            , table = layui.table
            , $ = layui.$;
        var page = {
            //page.name
            name:'user',
            //页面元素前缀，按配置，施工等模块定义
            prefix:'a1',
            //page标题
            title:"用户",
            //查询列表接口
            qryUrl:'/sysUser/queryPageList',
            //查询明细接口
            detUrl:'/sysUser/queryOneByPrimaryKey',
            //新增接口
            addUrl:'/sysUser/insertOne',
            //修改接口
            updUrl:'/sysUser/updateOne',
            //删除接口
            delUrl:'/sysUser/deleteChecked',
            //批量删除接口
            delBatchUrl:'/sysUser/deleteBatch',
            //导出接口
            downloadUrl:'sysUser/download',
            //查询条件
            conName:'userConForm',
            //按钮
            btnName:'userBtnForm',
            //表格id
            tableName:'userTable',
            //表单Id
            formName:'userForm',
            //表主键
            keyId:'userId',
            //排序
            orderBy:" user_id desc",
            //默认初始化查询条件
            addModel:{
                // dictCode:"DEDUCTION_FLAG"
            },
            //查询条件 label#id#类型
            //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            //注意：如果类型是sel 则用:分割 [0]是id [1]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            conArray : [
                "姓名|userName|TEXT",
                "电话号码|loginName|TEXT",
                "角色|roleCode:t2|SEL",
                "入职时间|entryBeginTm:entryEndTm:d2|RDT",
                "离职时间|quitBeginTm:quitEndTm:d2|RDT",
                "状态|state:USER_STATE:t1|DICT",
                "组织机构|orgId:t2|SEL",
                // "部门|orgId:t2|SEL",
            ],
            //按钮 id#名称#类型#图标#是否权限控制
            btnArray:[
                'userQueryBtn|查询|primary|&#xe615;|N',
                'userAddBtn|新增|primary|&#xe624;|Y',
                'userUpdateBtn|编辑|primary|&#xe642;|Y',
                'userViewBtn|明细|primary|&#xe655;|N',
                'userDelBtn|离职|danger|&#xe640;|Y',
                'userExpBtn|导出|normal|&#xe67d;|Y'
            ],
            //表格列
            cols:[[
                {type: 'checkbox'}
                , {field: 'userId', title: '编号'}
                , {field: 'loginName', title: '电话'}
                , {field: 'userName', title: '姓名'}
                , {field: 'roleNames', title: '角色'}
                , {
                    field: 'state', title: '状态', templet: function (d) {
                        return shopx.getDictByCodeName("USER_STATE",d.state);
                    }
                }
                , {
                    field: 'cpName', title: '公司', templet: function (d) {
                        return shopx.getUserInfo().cpName;
                    }
                }
                // , {field: 'orgName', title: '部门'}
                , {field: 'entryTm', title: '入职时间',  sort: true}
                , {field: 'userRemark', title: '备注'}
            ]],
            //表单 label|id|类型|是否必填
            //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            //注意：如果类型是sel 则用:分割 [0]是id [1]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
            formArray:[
                "主键|userId|HIDDEN",
                "头像|portrait|UPIMG|Y",
                // "头像2|openId|UPIMGS|Y",
                // "头像2|openId|UPFILE|Y",
                "电话|loginName|NUMBER|Y",
                "姓名|userName|TEXT|Y",
                "入职时间|entryTm|DT|Y",
                "角色|roleCodes:t3|SEL|Y",
                // "部门|orgId:t2|SEL|Y", //
                "备注|userRemark|TEXT|N",
                "状态|state:USER_STATE:t1|DICT|N",
                "部门|orgTree|TREE|Y",
                // "角色|roleCode:t3|SEL|Y"
            ],
            // beforeQueryFunc:function(){
            // 查询前调用函数
            // alert("查询前")
            // },
            // afterQueryFunc:function(res){
            //查询后调用函数
            // alert("查询后:"+JSON.stringify(res))
            // },
            beforeAddFunc:function(){
                a1RenderForm();
                form.render();
            },
            midAddFunc:function(data){
                //获取树菜单选中值
                var chkUrlIds = layui.tree.getChecked('f_a1_orgTree');
                var urlIds = getTreeChkIds(chkUrlIds);
                data.field['orgIds'] = urlIds;
            },
            // afterAddFunc:function(res){
            //新增后调用函数
            // alert("新增后:"+JSON.stringify(res));
            // },
            beforeUpdFunc:function(res,callBackFunc){
                // console.info(JSON.stringify(res));
                a1RenderForm(res,callBackFunc,false);
            },
            midUpdFunc:function(data){
                // form.render();
                var chkUrlIds = layui.tree.getChecked('f_a1_orgTree');
                var urlIds = getTreeChkIds(chkUrlIds);
                data.field['orgIds'] = urlIds;
            },
            // afterUpdFunc:function(res){
            //     //新增后调用函数
            // },
            beforeViewFunc:function(res,callBackFunc){
                a1RenderForm(res,callBackFunc,true);
            },
            // beforeDelFunc:function(res){
            //     //新增前调用函数
            //     alert("删除前"+JSON.stringify(res));
            // },
            // afterDelFunc:function(res){
            //     //新增后调用函数
            //     alert("删除后:"+JSON.stringify(res))
            // },
        }
        //展示菜单
        shopx.genCond(page);
        //展示按钮
        shopx.genBtn(page);
        //展示有权限的按钮
        shopx.eleAuthShow(http.getUserFunc());

        setTimeout(function() {
            //角色下拉框展示
            var model={};
            http.qryRoleList(model,"q_"+page.prefix+"_roleCode");
            http.qryOrgList(model,"q_"+page.prefix+"_orgId");
            //部门下拉框选择
        }, 500);

        //初始化分页查询 其中addModel是初始化查询条件
        http.initPage(page);

        // form.render();
    });

    /**
     * 渲染表单
     * @param res：响应结果
     * @param callBackFunc：回调函数
     * @param viewFlag：是否只读
     */
    function a1RenderForm(res,callBackFunc,viewFlag){
        //1、入职时间渲染
        if(!viewFlag){
            layui.laydate.render({
                elem: '#f_a1_entryTm',
                format: 'yyyyMMdd'
            });
        }

        //2、部门渲染
        if(layui.pub.isEmpty(res)){
            //新增
            //1、渲染菜单树
            //查询菜单树
            layui.http.postRequest("/sysOrg/queryOrgTreeList", 'POST', {}, function suc(data) {
                // console.info("1:"+JSON.stringify(data.rspData));
                var treeModel = [
                    {
                        "id": "0",
                        "title": "创艺装饰",
                        "children":JSON.parse(data.rspData)
                    }
                ];
                layui.tree.render({
                    elem: '#f_a1_orgTree'
                    ,data: JSON.parse(JSON.stringify(treeModel))
                    ,showCheckbox: true  //是否显示复选框
                    ,id: 'f_a1_orgTree'
                    ,isJump: true
                });
            }, null, false, false);
        }else{
            //展示已经绑定的组织机构
            layui.jquery("#f_a1_orgTree").attr("readonly",true);
            // console.info(JSON.stringify(res));
            var orgIds = res.rspData.orgIds;
            var model={
                ids:orgIds
            }
            layui.http.postRequest("/sysOrg/queryEditOrgNodeList", 'POST', model, function suc(data) {
                // console.info("1:"+JSON.stringify(data.rspData));
                var treeModel = [
                    {
                        "id": "0",
                        "title": "创艺装饰",
                        "children":JSON.parse(data.rspData)
                    }
                ];
                layui.tree.render({
                    elem: '#f_a1_orgTree'
                    ,data: JSON.parse(JSON.stringify(treeModel))
                    ,showCheckbox: true  //是否显示复选框
                    ,checkDisabled: false
                    ,id: 'f_a1_orgTree'
                    ,isJump: true //是否允许点击节点时弹出新窗口跳转
                });
            }, null, false, false);
            if(!layui.pub.isEmpty(callBackFunc) && (typeof callBackFunc == 'function')){
                //查询结果完成后，新建一个回调函数，进行元素再次渲染
                //如user响应完成后，需要重新查询数据库，渲染一次角色菜单，生成多选下拉框，则需要再响应后，再调用一次接口，获取数据后，再通过回调函数渲染一次表单
                callBackFunc();
            }
        }
        //3、图片上传
        //编号
        var imgId = 'f_a1_portrait';
        //是否支持多个图片上传
        var muilFlag = false;
        //图片数量
        var imgSize = 1;
        //上传图片地址
        var uploadUrl = "fileController/uploadImg";
        layui.http.uploadImgs(imgId,uploadUrl,muilFlag,null,null,imgSuffix,imgSize,'img');

        //编号
        // var imgId2 = 'f_a1_openId';
        // //是否支持多个图片上传
        // var muilFlag2 = true;
        // //图片数量
        // var imgSize2 = 3;
        //
        // layui.http.uploadImgs(imgId2,uploadUrl,muilFlag2,null,null,imgSuffix,imgSize2,'img');


        //编号
        // var fileId = 'f_a1_openId';
        // // //是否支持多个文件上传
        // var muilFlag2 = true;
        // //文件数量
        // var imgSize2 = 3;
        // //上传图片地址
        // var uploadUrl2 = "fileController/uploadFile";
        // layui.http.uploadFile(fileId,uploadUrl2,muilFlag2,null,null,fileSuffix,imgSize2,'file');


        //角色渲染
        layui.http.postRequest("/sysRole/queryPageList", 'POST', {}, function suc(data) {
            layui.jquery("#f_a1_roleCode").html('<option value="">请选择</option>');
            var arr = new Array();
            var i = 0;
            layui.jquery(data.rspData.data).each(function (idx, item) {
                var role = {"name": item.roleName, "value": item.roleCode}
                arr[i] = role;
                i++;
            });
            layui.formSelects.data('f_a1_roleCodes', 'local', {
                arr: arr
            });

            //响应渲染，针对明细和编辑功能，需要针对响应数据对页面元素进行渲染
            if(!layui.pub.isEmpty(res)){
                //渲染角色下拉框
                var roleCodes = res.rspData.roleCodes;
                var arr = new Array();
                var i = 0;
                layui.jquery(roleCodes.split(",")).each(function (idx, item) {
                    arr[i] = item;
                    i++;
                });
                layui.formSelects.value('f_a1_roleCodes', arr);

                //渲染图片展示
                showImgs("f_a1_portrait",res.rspData.portrait,muilFlag,viewFlag);
                // showImgs("f_a1_openId",res.rspData.openId,muilFlag2,viewFlag);
                //渲染文件展示
                // showFiles("f_a1_openId",res.rspData.openId,viewFlag);
                if(!layui.pub.isEmpty(callBackFunc) && (typeof callBackFunc == 'function')){
                    //查询结果完成后，新建一个回调函数，进行元素再次渲染
                    //如user响应完成后，需要重新查询数据库，渲染一次角色菜单，生成多选下拉框，则需要再响应后，再调用一次接口，获取数据后，再通过回调函数渲染一次表单
                    callBackFunc();
                }
            }
        }, null, false, false);
    }


    /**
     * 获取树选中的id
     * @param data
     * @returns {string}
     */
    function getTreeChkIds(data) {
        var ids = [];
        function traverse(node) {
            if (node.id) {
                ids.push(node.id);
            }
            if (node.children && node.children.length > 0) {
                for (var i = 0; i < node.children.length; i++) {
                    traverse(node.children[i]);
                }
            }
        }
        for (var i = 0; i < data.length; i++) {
            traverse(data[i]);
        }
        return ids.join(',');
    }
</script>
</body>
</html>